import gsap from "./gsap/gsap.js";
import { CustomEase } from "./gsap/CustomEase.js";

export default class OurServer {
  wrapper;
  dots;
  line1;
  tabs;
  icons;
  tl;
  dotWrapper;
  serviceItems;
  constructor(direction) {
    var wrapper = document.querySelector(".service-container");
    if (!wrapper) return;
    var dots = wrapper.querySelectorAll(".dot");
    var line1 = wrapper.querySelector(".service-line1");
    var line2 = wrapper.querySelector(".service-line2");
    var dotWrapper = wrapper.querySelector(".dot-wrapper");
    var tabs = wrapper.querySelectorAll(".service-iconbox-tab");
    var icons = wrapper.querySelectorAll(".service-iconbox-tab .iconfont");
    var serviceItems = wrapper.querySelectorAll(".service-item");
    var serviceBody = document.querySelectorAll(".service-body")[0];
    this.wrapper = wrapper;
    this.dots = dots;
    this.line1 = line1;
    this.line2 = line2;
    this.tabs = tabs;
    this.icons = icons;
    this.dotWrapper = dotWrapper;
    this.tl = gsap.timeline();
    this.serviceItems = serviceItems;
    this.serviceBody = serviceBody;
    this.direction = direction || "up";
  }

  main() {
    this.init();
    this.setServiceBodyHeight(this.serviceItems[0]);
    this.entranceAnimate();
  }

  init() {
    gsap.set(this.dots, {
      opacity: 0,
    });
    gsap.set(this.line1, {
      width: 0,
    });
    var y = this.direction === "down" ? "-101%" : "101%";
    gsap.set(this.icons, {
      y: y,
    });
  }

  entranceAnimate() {
    var _this = this;
    _this.tl.add("start");
    _this.tl.to(
      _this.dots,
      {
        opacity: 1,
        stagger: {
          each: 0.5,
        },
        duration: 0.5,
        ease: CustomEase.create("custom", "M0,0 C0,0 1,1 1,1 "),
      },
      "start"
    );
    _this.tl.to(
      _this.line1,
      {
        width: "96%",
        duration: 1.5,
        ease: CustomEase.create("custom", "M0,0 C0,0 1,1 1,1 "),
      },
      "start"
    );

    _this.tl.to(_this.icons, {
      y: 0,
      stagger: 0.2,
      onComplete: function () {
        _this.serviceItems[0].classList.add("on");
        _this.dots[0].classList.add("on", "circle");
        _this.icons[0].parentNode.classList.add("on");
        _this.tabClick();
      },
    });
  }

  tabClick() {
    var _this = this;
   
    Array.from(_this.tabs, function (item, index) {
      item.addEventListener("click", function (e) {
        _this.beforeDotActive(index, "on", "circle");
        if (_this.tabs[0]) _this.curTabActive(_this.tabs, _this.tabs[index]);
        _this.curTabActive(_this.serviceItems, _this.serviceItems[index]);
      });
    });

    Array.from(_this.dots, function (item, index) {
      item.addEventListener("click", function (e) {
        _this.beforeDotActive(index, "on", "circle");
        if (_this.tabs[0]) _this.curTabActive(_this.tabs, _this.tabs[index]);
        _this.curTabActive(_this.serviceItems, _this.serviceItems[index]);
      });
    });
  }

  setServiceBodyHeight($this) {
    var h = getComputedStyle($this)["height"];
    this.serviceBody.style.height = h;
  }

  curTabActive(parent, $this) {
    this.setServiceBodyHeight($this);
    Array.from(parent, function (item) {
      item.classList.remove("on");
    });
    $this.classList.add("on");
  }

  // 点击之前的 dot 高亮
  beforeDotActive(id, ...rest) {
    var _this = this;
    _this.line2.style.width = id * 32 + "%";
    Array.from(_this.dots, function (item, index) {
      if (id >= index) {
        item.classList.add(...rest);
      } else {
        item.classList.remove(...rest);
      }
    });
  }
}
